<template>
    <div>
        <el-form :inline="true" :model="queryParam" style="text-align: start">
            <el-form-item label="调查名">
                <el-input prefix-icon="el-icon-search" v-model="queryParam.name" placeholder="" @keyup.enter.native.prevent="query()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="query()">查询</el-button>
                <el-button type="primary" :loading="loading" @click="reset()">重置</el-button>
                <el-button type="success" @click="add()">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :loading="loading" :data="pageData.rows" stripe>
            <el-table-column align="center" min-width="160" label="调查名" prop="name"></el-table-column>
            <el-table-column align="center" min-width="160" label="描述" prop="tag"></el-table-column>
            <el-table-column align="center" min-width="160" label="问卷名" prop="questionnaireVo.name"></el-table-column>
            <el-table-column align="center" min-width="60" label="状态" prop="state"></el-table-column>
            <el-table-column align="center" min-width="100" label="已完成人数" prop="doneSum"></el-table-column>
            <el-table-column align="center" min-width="100" label="被调查人数" prop="respondentSum"></el-table-column>
            <el-table-column align="center" min-width="160" label="创建时间" prop="createTime"></el-table-column>
            <el-table-column align="center" min-width="200" label="操作" fixed="right">
                <template slot-scope="props">
                    <el-button type="primary" size="mini" @click="exportExcel(props.row)">导出</el-button>
                    <el-button type="primary" size="mini" @click="detail(props.row)">分析</el-button>
                    <el-button v-if="props.row.state===SURVEY.ING" type="primary" size="mini" @click="stop(props.row)">
                        停止
                    </el-button>
                    <el-button v-if="props.row.state===SURVEY.STOP" type="primary" size="mini"
                               @click="restart(props.row)">重启
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-inner">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageData.currentPage" :page-size="pageData.pageSize"
                           :page-sizes="pageData.pageSizes"
                           layout="total, prev, pager, next, jumper" :total="pageData.total">
            </el-pagination>
        </div>

        <el-dialog
            title="新增调查"
            :visible.sync="addSurveyDialog.dialogVisible"
            width="80%" :close-on-click-modal="false" destroy-on-close>
            <add-survey></add-survey>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addSurveyDialog.dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="addSurvey()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="restartDialog.dialogVisible"
            width="30%">
            <span>确定重启吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="restartDialog.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="restartSurvey()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="stopDialog.dialogVisible"
            width="30%">
            <span>确定停止吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="stopDialog.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="stopSurvey()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="调查分析"
            :visible.sync="analyseDialog.dialogVisible"
            fullscreen
            destroy-on-close>
            <survey-analyse :surveyId="analyseDialog.surveyId"></survey-analyse>
        </el-dialog>
    </div>
</template>

<script>
    import dateUtils from "@/common/date_util"
    import API from "../../api/api_survey"
    import CONSTANTS from "../../common/constants"
    import {mapActions, mapGetters} from 'vuex';
    import AddSurvey from './AddSurvey';
    import SurveyAnalyse from "./SurveyAnalyse"

    export default {
        name: "survey",
        components: {
            AddSurvey,
            SurveyAnalyse
        },
        computed: {
            ...mapGetters('survey', [
                'pageData',
                'pageParam'
            ]),
            SURVEY() {
                return {
                    ING: CONSTANTS.SURVEY.ING,
                    STOP: CONSTANTS.SURVEY.STOP,
                }
            }
        },
        data() {
            return {
                loading: false,
                queryParam: {
                    name: ""
                },
                restartDialog: {
                    dialogVisible: false,
                    currentData: {}
                },
                stopDialog: {
                    dialogVisible: false,
                    currentData: {}
                },
                addSurveyDialog: {
                    dialogVisible: false,
                },
                analyseDialog: {
                    dialogVisible: false,
                    surveyId: ""
                }
            }
        },
        methods: {
            ...mapActions('survey', [
                'listSurveysByPageAct',
                'resetPageAct',
                'restartSurveyAct',
                'stopSurveyAct',
                'setAddSurveyAct'
            ]),
            ...mapActions('questionnaire', [
                'setQuestionnaireSelectAct'
            ]),
            ...mapActions('user', [
                'setUserSelectAct'
            ]),
            handleCurrentChange(val) {
                let _that = this;
                let param = _that.pageParam;
                param.page = val;
                _that.listSurveysByPageAct(param);
            },
            handleSizeChange(val) {
                let _that = this;
                let param = _that.pageParam;
                param.pageSize = val;
                _that.listSurveysByPageAct(param);
            },
            listSurveysByPage(params) {
                let _that = this;
                _that.loading = true;
                return new Promise((resolve, reject) => {
                    _that.listSurveysByPageAct(params).then(res => {
                        _that.loading = false;
                        resolve(res);
                    }).catch(e => {
                        _that.loading = false;
                        reject(e);
                    });
                });
            },
            restartSurvey() {
                let _that = this;
                _that.restartSurveyAct(_that.restartDialog.currentData).then(() => {
                    _that.listSurveysByPage().then(() => {
                        _that.restartDialog.dialogVisible = false;
                    }).catch(() => {
                        _that.restartDialog.dialogVisible = false;
                    });
                }).catch(() => {
                    _that.restartDialog.dialogVisible = false;
                });
            },
            stopSurvey() {
                let _that = this;
                _that.stopSurveyAct(_that.stopDialog.currentData).then(() => {
                    _that.listSurveysByPage().then(() => {
                        _that.stopDialog.dialogVisible = false;
                    }).catch(() => {
                        _that.stopDialog.dialogVisible = false;
                    });
                }).catch(() => {
                    _that.stopDialog.dialogVisible = false;
                });
            },
            stop(val) {
                let _that = this;
                _that.stopDialog.currentData = val;
                _that.stopDialog.dialogVisible = true;
            },
            add() {
                let _that = this;
                //重置已选择的问卷缓存
                _that.setQuestionnaireSelectAct({id: ""});
                //重置已选择的被调查人缓存
                _that.setAddSurveyAct({name: "", tag: ""});
                //重置调查名及描述缓存
                _that.setUserSelectAct({selectIds: []});
                _that.addSurveyDialog.dialogVisible = true;
            },
            addSurvey() {
                let _that = this;
                _that.loading = true;
                let questionnaireId = _that.$store.state.questionnaire.questionnaireSelect.id ? _that.$store.state.questionnaire.questionnaireSelect.id : "";
                let surveyVo = _that.$store.state.survey.addSurvey;
                let userIds = _that.$store.state.user.userSelect.selectIds ? _that.$store.state.user.userSelect.selectIds : [];
                if (!surveyVo.name) {
                    _that.$message({
                        message: '请填写调查名',
                        type: 'warning'
                    });
                    _that.loading = false;
                    return;
                }
                if (!surveyVo.tag) {
                    _that.$message({
                        message: '请填写调查描述',
                        type: 'warning'
                    });
                    _that.loading = false;
                    return;
                }
                if (!questionnaireId) {
                    _that.$message({
                        message: '请选择问卷',
                        type: 'warning'
                    });
                    _that.loading = false;
                    return;
                }
                if (userIds.length === 0) {
                    _that.$message({
                        message: '请选择被调查人',
                        type: 'warning'
                    });
                    _that.loading = false;
                    return;
                }
                const addSurveyVo = {
                    questionnaireId,
                    name: surveyVo.name,
                    tag: surveyVo.tag,
                    userIds
                };
                API.addSurvey(addSurveyVo).then(res => {
                    // _that.$message("新增成功");
                    _that.query();
                    _that.loading = false;
                    _that.addSurveyDialog.dialogVisible = false;
                }).catch(() => {
                    // _that.$message({
                    //     message: '新增失败',
                    //     type: 'error'
                    // });
                    _that.loading = false;
                    _that.addSurveyDialog.dialogVisible = false;
                });
            },
            detail(val) {
                let _that = this;
                _that.analyseDialog.surveyId = val.id;
                _that.analyseDialog.dialogVisible = true;
            },
            restart(val) {
                let _that = this;
                _that.restartDialog.currentData = val;
                _that.restartDialog.dialogVisible = true;
            },
            query() {
                let _that = this;
                let param = _that.pageParam;
                param.name = _that.queryParam.name;
                this.listSurveysByPage(param);
            },
            reset() {
                let _that = this;
                _that.loading = true;
                _that.queryParam.name = "";
                _that.resetPageAct().then(() => {
                    _that.loading = false;
                }).catch(() => {
                    _that.loading = false;
                });
            },
            exportExcel(val) {
                API.exportExcel({id: val.id});
            }
        },
        mounted() {
            let _that = this;
            _that.reset();
        }
    }
</script>

<style scoped>

</style>
